<template>
  <div v-loading="loading" class="app-container">
    <div class="header_title_box">
      <h2>基本信息</h2>
    </div>
    <div v-action="'salesWarning@unsalableDetailExport'" class="operation_button_box">
      <el-button size="middle" type="primary" :loading="exportLoading" @click="handleExport">导出</el-button>
    </div>
    <div v-loading="loading">
      <el-table :data="data" border fit>
        <el-table-column key="batch_no" label="入库批次" prop="batch_no" align="center" min-width="120" />
        <el-table-column key="wareghouseTime" label="入库时间" prop="wareghouseTime" align="center" min-width="120" />
        <el-table-column key="cabinet_no" label="柜子号" prop="cabinet_no" align="center" min-width="109">
          <template slot-scope="scope">
            <template v-if="scope.row.cabinet_no.length > 0">
              <div v-for="item in scope.row.cabinet_no" :key="item">{{ item }}</div>
            </template>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <!-- <el-table-column key="supply" label="供应商" prop="supply" align="center" min-width="100" /> -->
        <el-table-column key="unit" label="计量单位" prop="unit" align="center" min-width="100" />
        <!-- <el-table-column key="shipping_fee" label="海运费" prop="shipping_fee" align="center" min-width="126" /> -->
        <!-- <el-table-column key="tax_fee" label="总关税" prop="tax_fee" align="center" min-width="119" /> -->
        <el-table-column key="currency" label="计价币种" prop="currency" align="center" min-width="81" />
        <el-table-column key="volume" label="体积" prop="volume" align="center" min-width="81" />
        <!-- <el-table-column v-if="!roles.includes('operator')" key="price" label="库存商品单价（FOB单价）" prop="price" align="center" min-width="120" />
        <el-table-column v-if="!roles.includes('operator')" key="amount" label="库存金额(FOB金额)" prop="amount" align="center" min-width="120" /> -->
        <el-table-column key="number" label="即时库存" prop="number" align="center" min-width="104" />
        <el-table-column key="days" label="库存时长" prop="days" align="center" min-width="100" />
      </el-table>
    </div>
    <div class="dialog-footer-center">
      <span>
        <el-button type="primary" @click="handleCancel">返回</el-button>
      </span>
    </div>
    <!--下载字段选择-->
    <DownModul :url="exportUrl" :search-param="downLoadParams" :form-visible-down.sync="formVisibleDown" titel="导出字段选择" :options-modul="optionsModul" />
  </div>
</template>

<script>
import { action } from '@/directive/permission/index.js' // 权限判断指令
// import { downloadxlsx } from '@/utils/index'
import { mapGetters } from 'vuex'
import DownModul from '@/components/DownModul/index.vue'
export default {
  name: 'SalesWarningUnsalableInfo',
  components: { DownModul },
  directives: {
    action
  },
  data() {
    return {
      code: '',
      virtual_warehouse_id: '',
      data: [], // 详情
      loading: false,
      exportLoading: false,
      exportUrl: '/sales-warning/unsalable/detail/export',
      formVisibleDown: false,
      optionsModul: [
        {
          key: 'batch_no',
          label: '批次号'
        },
        {
          key: 'wareghouseTime',
          label: '入库时间'
        },
        {
          key: 'cabinet_no',
          label: '柜子号'
        },
        {
          key: 'supply',
          label: '供应商'
        },
        {
          key: 'unit',
          label: '计量单位'
        },
        {
          key: 'shipping_fee',
          label: '海运费'
        },
        {
          key: 'tax_fee',
          label: '总关税'
        },
        {
          key: 'currency',
          label: '计价币种'
        },
        {
          key: 'volume',
          label: '体积'
        },
        {
          key: 'price',
          label: '库存商品单价（FOB单价）'
        },
        {
          key: 'amount',
          label: '库存金额（FOB金额）'
        },
        {
          key: 'number',
          label: '即时库存'
        },
        {
          key: 'days',
          label: '库存时长'
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  created() {
    const vm = this
    const { code, virtual_warehouse_id } = vm.$route.query
    vm.code = code
    vm.virtual_warehouse_id = virtual_warehouse_id
    vm.getInfo() // 获取详情
  },
  methods: {
    // 导出
    handleExport() {
      const vm = this
      const params = {
        code: vm.code,
        virtual_warehouse_id: vm.virtual_warehouse_id
      }
      vm.downLoadParams = params
      vm.formVisibleDown = true
    },
    // 导出
    // handleExport() {
    //   const vm = this
    //   console.log('handleExport-----------------')
    //   vm.exportLoading = true
    //   const params = {
    //     code: vm.code,
    //     virtual_warehouse_id: vm.virtual_warehouse_id
    //   }
    //   vm.$http.get('/sales-warning/unsalable/detail/export', { params }).then(res => {
    //     downloadxlsx(res.data)
    //     vm.exportLoading = false
    //   }).catch(() => {
    //     vm.exportLoading = false
    //   })
    // },
    // 获取详情
    getInfo() {
      const vm = this
      vm.loading = true
      const params = {
        code: vm.code,
        virtual_warehouse_id: vm.virtual_warehouse_id
      }
      vm.$http.get('/sales-warning/unsalable/detail', { params }).then(res => {
        vm.data = res.data
        vm.loading = false
      }).catch(() => {
        vm.loading = false
      })
    },
    // 返回
    handleCancel() {
      const vm = this
      vm.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
